<template>
  <a-tabs v-model:activeKey="activeKey" @change="onChange" :animated="false">
    <a-tab-pane
      key="image"
      tab="图片"
      v-if="!query.id || (query.id && activeKey == 'image')"
    >
      <Eimage />
    </a-tab-pane>
    <a-tab-pane
      key="video"
      tab="视频"
      v-if="!query.id || (query.id && activeKey == 'video')"
    >
      <Evoide />
    </a-tab-pane>
    <a-tab-pane
      key="text"
      tab="文本"
      v-if="!query.id || (query.id && activeKey == 'text')"
    >
      <Etext />
    </a-tab-pane>
    <a-tab-pane
      key="popup"
      tab="弹窗"
      v-if="!query.id || (query.id && activeKey == 'popup')"
    >
      <Epopup />
    </a-tab-pane>
  </a-tabs>
</template>

<script>
  import {
    defineComponent,
    ref,
    computed,
    onMounted,
    watchEffect,
    watch,
  } from 'vue';
  import { useRouter } from 'vue-router';
  import Eimage from './image/index.vue';
  import Epopup from './popup/index.vue';
  import Etext from './text/index.vue';
  import Evoide from './video/index.vue';
  export default defineComponent({
    components: {
      Evoide,
      Etext,
      Epopup,
      Eimage,
    },
    setup(props, context) {
      const router = useRouter();
      const { query } = router.currentRoute.value;
      const activeKey = ref('image');

      onMounted(() => {
        activeKey.value = router.currentRoute.value.path.match(/[^\/]+$/)[0];
      });

      const onChange = (v) => {
        router.replace({ name: 'pluginadd' + v });
      };
      return {
        query,
        activeKey,
        onChange,
      };
    },
  });
</script>

<style></style>
